<template>
	<view class="after-sale-detail">
		<!-- 取件信息区域 -->
		<view class="pickup-info-section">
			<view class="pickup-status">待快递员取件</view>
			<view class="pickup-code">
				<text class="code-label">取件码:</text>
				<text class="code-value" v-if="afterData.pickupCode">{{ afterData.pickupCode }}</text>
				<text class="code-value" v-else>暂无取件码</text>
			</view>
			<view class="pickup-tip">请在快递员上门后出示</view>
			<view class="pickup-time">
				<text class="time-label" v-if="afterData.startTime && afterData.endTime">今天: {{afterData.startTime}}-{{ afterData.endTime }}</text>
				<text class="time-label" v-else>今天: 暂无取件时间</text>
				<text class="time-desc">快递员将上门取件</text>
			</view>
			<view class="pickup-address" v-if="afterData.receiveUserAddress">取件地址: {{ afterData.receiveUserAddress }}</view>
			<view class="pickup-address" v-else>取件地址: 暂无取件地址</view>
		</view>

		<!-- 快递员信息区域 -->
		<view class="courier-info-section">
			<view class="courier-avatar">
				<image class="courier-avatar-img" src="https://cos.ruilongan.com/XCX/2025/09/22/Frame_4_20250922091520A001.png" mode="aspectFill"></image>
			</view>
			<view class="courier-details">
				<view class="courier-name" v-if="afterData.courierName">快递员: {{ afterData.courierName }}</view>
				<view class="courier-name" v-else>快递员: 暂无快递员</view>
				<view class="courier-company">{{ afterData.deliveryName }}</view>
			</view>
			<image class="call-btn" src="https://cos.ruilongan.com/XCX/2025/09/22/Group_3_20250922094158A002.png" mode="aspectFit" @click="makeCall(afterData.courierPhone)"></image>
		</view>

		<!-- 商品详情区域 -->
		<view class="product-info-section">
			<view class="product-image">
				<image :src="orderData.orderSpeciDetailVoList[0].image | avatarUrlFind('1')" class="product-img"></image>
			</view>
			<view class="product-details">
				<view class="product-name">{{ orderData.orderSpeciDetailVoList[0].drugName }}</view>
				<view class="product-specs">
					<!-- <text class="product-id">商品编号: 15285604</text> -->
					<text class="product-size-color">{{ orderData.orderSpeciDetailVoList[0].speciName  }}</text>
				</view>
			</view>
			<view class="product-quantity">x{{ orderData.totalNum }}</view>
		</view>

		<!-- 申请详情区域 -->
		<view class="application-info-section">
			<view class="order-number">
				<text class="order-label">订单编号:</text>
				<text class="order-value">{{ orderData.id }}</text>
				<button class="copy-btn" @click="copyOrderNumber">复制</button>
			</view>
			<view class="application-amount">
				<text class="amount-label">申请金额:</text>
				<text class="amount-value">¥{{ orderData.payableAmount }}</text>
			</view>
			<view class="application-reason">
				<text class="reason-label">申请原因:</text>
				<text class="reason-value">{{ afterData.mallOrderAfterVo. applyInstructions}}</text>
			</view>
			<!-- <view class="application-time">
				<text class="time-label">申请时间:</text>
				<text class="time-value">2025-04-01 14:00</text>
			</view> -->
		</view>
	</view>
</template>

<script>
    import {
        queryByOrderId
    } from '@/api/order.js'
	export default {
		data() {
			return {
				orderData: {},
				orderId: '',
                afterData: {}
			}
		},
		onLoad(options) {
			if (options.order) {
				this.orderData = JSON.parse(decodeURIComponent(options.order));
				console.log('售后详情订单数据:', this.orderData);
                this.orderId = this.orderData.id;
                this.queryByOrderId();
			}
		},
		methods: {
			// 拨打电话
			makeCall(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber: phoneNumber, // 这里应该是快递员的真实电话
					success: () => {
						console.log('拨打电话成功');
					},
					fail: (err) => {
						console.log('拨打电话失败:', err);
						uni.showToast({
							title: '拨打电话失败',
							icon: 'none'
						});
					}
				});
			},
			
			// 复制订单号
			copyOrderNumber() {
				uni.setClipboardData({
					data: this.orderData.id,
					success: () => {
						uni.showToast({
							title: '订单号已复制',
							icon: 'success'
						});
					},
					fail: () => {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
			},
            queryByOrderId() {
                queryByOrderId(this.orderId).then(res => {
                    this.afterData = res.data;
                })
            }
		}
	}
</script>

<style>
	.after-sale-detail {
		min-height: 100vh;
		background-color: #f8f8f8;
		padding: 20rpx;
	}

	/* 取件信息区域 */
	.pickup-info-section {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.pickup-status {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 20rpx;
	}

	.pickup-code {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.code-label {
		font-size: 28rpx;
		color: #333;
		margin-right: 10rpx;
	}

	.code-value {
		font-size: 56rpx;
		font-weight: bold;
		color: #07c160;
		letter-spacing: 4rpx;
	}

	.pickup-tip {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 20rpx;
	}

	.pickup-time {
		margin-bottom: 20rpx;
	}

	.time-label {
		font-size: 28rpx;
		color: #07c160;
		font-weight: bold;
	}

	.time-desc {
		font-size: 28rpx;
		color: #333;
	}

	.pickup-address {
		font-size: 28rpx;
		color: #333;
	}

	/* 快递员信息区域 */
	.courier-info-section {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		border-top: 1rpx solid #f0f0f0;
	}

	.courier-avatar {
		margin-right: 20rpx;
	}

	.courier-avatar-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.courier-details {
		flex: 1;
	}

	.courier-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 8rpx;
	}

	.courier-company {
		font-size: 24rpx;
		color: #999;
	}

	.call-btn {
		width: 180rpx;
		height: 120rpx;
		cursor: pointer;
	}

	/* 商品详情区域 */
	.product-info-section {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: flex-start;
		border-top: 1rpx solid #f0f0f0;
	}

	.product-image {
		margin-right: 20rpx;
	}

	.product-img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
		background-color: #f0f0f0;
	}

	.product-details {
		flex: 1;
	}

	.product-name {
		font-size: 28rpx;
		color: #333;
		line-height: 1.4;
		margin-bottom: 15rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.product-specs {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.product-id,
	.product-size-color {
		font-size: 24rpx;
		color: #999;
	}

	.product-quantity {
		font-size: 28rpx;
		color: #333;
		align-self: flex-start;
		margin-top: 10rpx;
	}

	/* 申请详情区域 */
	.application-info-section {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		border-top: 1rpx solid #f0f0f0;
	}

	.order-number {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.order-label {
		font-size: 28rpx;
		color: #333;
		margin-right: 10rpx;
	}

	.order-value {
		font-size: 28rpx;
		color: #333;
		flex: 1;
	}

	.copy-btn {
		background-color: #f8f8f8;
		color: #666;
		border: none;
		border-radius: 8rpx;
		padding: 8rpx 16rpx;
		font-size: 24rpx;
	}

	.application-amount,
	.application-reason,
	.application-time {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.amount-label,
	.reason-label,
	.time-label {
		font-size: 28rpx;
		color: #333;
		margin-right: 10rpx;
	}

	.amount-value,
	.reason-value,
	.time-value {
		font-size: 28rpx;
		color: #333;
	}

	.application-time {
		margin-bottom: 0;
	}
</style>
